<template>
  <div class="app-container">
    <el-row :gutter="12">
      <el-col :md="16">
        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>项目基础信息</span>
          </div>

          <el-form :model="form" label-width="100px">
            <el-row :gutter="12">
              <el-col :md="12">
                <el-form-item label="招标名称">招标名称</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标编号">XJD-998376241</el-form-item>
              </el-col>
              <el-col :md="12">
                <el-form-item label="采购单位"
                  >北京国电龙源环保工程有限公司</el-form-item
                >
              </el-col>
              <el-col :md="12">
                <el-form-item label="招标方式">公开招标</el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>

        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>物料明细</span>
            <div class="float-right">
              <el-button type="primary" plain>导出物料明细</el-button>
              <el-button type="primary" plain @click="dialogVisible = true"
                >快速报价
              </el-button>
            </div>
          </div>
          <el-table :data="lists">
            <el-table-column
              label="序号"
              type="index"
              width="60"
              align="center"
              fixed="left"
            ></el-table-column>
            <el-table-column
              width="100"
              label="物料编码"
              prop="code"
              fixed="left"
            ></el-table-column>
            <el-table-column
              width="140"
              label="物料名称"
              prop="name"
              fixed="left"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              width="130"
              show-overflow-tooltip
              label="规格型号"
              prop="model"
              fixed="left"
            ></el-table-column>
            <el-table-column
              width="80"
              align="center"
              label="数量"
              prop="num"
              fixed="left"
            ></el-table-column>
            <el-table-column
              width="80"
              align="center"
              label="计量单位"
              prop="unit"
              fixed="left"
            ></el-table-column>
            <el-table-column
              width="120"
              label="使用厂区"
              prop="use"
            ></el-table-column>
            <el-table-column
              width="80"
              align="center"
              label="联系人"
              prop="contract"
            ></el-table-column>
            <el-table-column
              label="联系电话"
              prop="contract_mobile"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              width="120"
              align="center"
              label="品牌"
              prop="brand"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.brand"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              align="center"
              label="制造商"
              prop="made"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.made"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="第一轮报价"
              prop="offer_1"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              width="120"
              align="center"
              label="含税单价"
              prop="tax_price"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.tax_price"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              align="center"
              label="税率"
              prop="tax_rate"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.tax_rate"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              width="120"
              align="center"
              label="质保期"
              prop="warranty"
            >
              <template slot-scope="scope">
                <el-input v-model="scope.row.warranty"></el-input>
              </template>
            </el-table-column>
            <el-table-column
              label="未含税总单价（元）"
              prop="no_tax_price"
              width="120"
            ></el-table-column>
            <el-table-column
              label="未含税总价"
              width="120"
              prop="no_tax_count"
            ></el-table-column>
            <el-table-column
              label="含税总价"
              prop="tax_count"
              width="120"
            ></el-table-column>
            <el-table-column
              label="承诺交货日期"
              prop="promise_delivery_date"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="期望交货日期"
              prop="want_delivery_date"
              width="120"
              align="center"
            ></el-table-column>
            <el-table-column
              label="供方备注"
              prop="supplier_remark"
              width="120"
              show-overflow-tooltip
            ></el-table-column>
            <el-table-column
              label="采购方备注"
              width="120"
              show-overflow-tooltip
              prop="purchaser_remark"
            ></el-table-column>
          </el-table>
        </el-card>
        <div class="text-center">
          <el-button type="primary" @click="handleAd">提交报价</el-button>
          <el-button @click="$router.go(-1)">取消</el-button>
        </div>
      </el-col>
      <el-col :md="8">
        <el-card shadow="never" class="mb-20">
          <div slot="header">
            <span>评标流程记录</span>
          </div>
          <div style="height: 200px">
            <el-steps direction="vertical" :active="1">
              <el-step
                title="签到"
                description="确认签到   2020-12-12  12:00:00"
              ></el-step>
              <el-step title="供应商报价">
                <!-- <template slot="title">
                  <router-link to="/bidding/evaluation_hall">
                    评标
                  </router-link>
                </template> -->
              </el-step>
              <el-step title="拟定结果">
                <!-- <template slot="title">
                  <router-link to="/bidding/evaluation_result">
                    拟定结果
                  </router-link>
                </template> -->
              </el-step>
            </el-steps>
          </div>
        </el-card>

        <el-card shadow="never" class="mb-20">
          <div slot="header" class="clearfix">
            <span>澄清公告</span>
            <el-button type="primary" plain class="float-right" size="small"
              >澄清
            </el-button>
          </div>
          <ul class="list">
            <li class="clearfix mb-10" v-for="i in 6" :key="i">
              <span class="float-left">澄清名称{{ i }}</span>
              <span class="float-right">16:44:43</span>
            </li>
          </ul>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="快速报价" :visible.sync="dialogVisible" width="30%">
      <el-form :model="form" label-width="120px">
        <el-form-item label="报价方式" required>
          <el-radio-group v-model="form.radio1">
            <el-radio :label="1">按比例</el-radio>
            <el-radio :label="2">按金额</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="调价方式" required>
          <el-radio-group v-model="form.radio2">
            <el-radio :label="1">上调</el-radio>
            <el-radio :label="2">下调</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="金额比例" required>
          <el-row :gutter="10">
            <el-col :span="12">
              <el-input v-model="form.price"></el-input>
            </el-col>
            <el-col :span="6"><span>元/%</span></el-col>
          </el-row>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAd">确 定 </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
const temp = {
  code: "01080010",
  name: "卡套式端直通管接头",
  model: "Φ10*R1/4〃",
  num: "100",
  unit: "个",
  use: "工厂1部",
  contract: "联系人",
  contract_mobile: "13103438866",
  brand: "",
  made: "",
  offer_1: "15.00",
  tax_price: "",
  tax_rate: "",
  warranty: "",
  no_tax_price: "",
  no_tax_count: "",
  tax_count: "",
  promise_delivery_date: "2020-12-12",
  want_delivery_date: "2020-12-10",
  supplier_remark: "",
  purchaser_remark: "个",
};
export default {
  data() {
    return {
      form: {
        title: "招标名称",
        code: "XJD-998376241",
        company: "叮当（天津）电子商务有限公司",
        way: "公开招标",
      },
      expert: [],
      lists: [],
      opinion: "",
      message: "",
      dialogVisible: false,
      form: {
        radio1: 1,
        radio2: 1,
        price: "",
      },
    };
  },
  methods: {
    handleAd() {
      this.$router.push("/bidding/evaluation_hall_supplier?ad=1");
    },
  },
  created() {
    for (let i = 0; i < 10; i++) {
      this.lists.push(temp);
    }
  },
};
</script>

<style lang="scss" scoped>
.app-container {
  background-color: #e3e3e3;
  min-height: 100vh;
}
</style>
